<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>
<nz-card>
  <form nz-form class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <span class="text">统计时间：{{ statistics_date }}</span>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-cascader
            [nzShowSearch]="true"
            [nzOptions]="companyShopOptions"
            [(ngModel)]="values"
            (ngModelChange)="onChanges($event)"
            name="shopId"
          ></nz-cascader>
        </nz-form-item>
      </div>
      <div nz-col nzMd="10" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-radio-group [(ngModel)]="q.dateType" name="dateType" (ngModelChange)="dateTypeChange($event)">
              <label nz-radio [nzValue]="1">昨日</label>
              <label nz-radio [nzValue]="2">近7天</label>
              <label nz-radio [nzValue]="3">近30天</label>
              <label nz-radio [nzValue]="4">日</label>
              <nz-date-picker
                *ngIf="q.dateType == 4"
                [(ngModel)]="q.dateVal"
                name="dateVal"
                style="margin-right: 24px"
                (ngModelChange)="datePickerChange($event)"
              ></nz-date-picker>
              <label nz-radio [nzValue]="5">月</label>
              <nz-date-picker
                nzMode="month"
                *ngIf="q.dateType == 5"
                name="dateVal"
                [(ngModel)]="q.dateVal"
                (ngModelChange)="datePickerChange($event)"
              ></nz-date-picker>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</nz-card>

<nz-spin *ngIf="loading" class="modal-spin"></nz-spin>
<ng-container *ngIf="!loading">
  <nz-card nzTitle="店铺交易转化">
    <div nz-row [nzGutter]="24" *ngIf="shopTrans.length > 0">
      <nz-table #shopTransTable [nzData]="shopTrans" [nzShowPagination]="false" class="shop-trans-table">
        <tbody>
          <tr>
            <td nzAlign="left" style="background-color: rgb(242, 245, 255)" class="shop-trans-cell">
              <p class="factor-text">商品访客数</p>
              <p class="factor-val">{{ shopTransTable.data[0]['ctm_item_view_uv'] }}</p>
              <trend
                [flag]="shopTransTable.data[0]['ctm_item_view_uv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['ctm_item_view_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['ctm_item_view_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left" style="background-color: rgb(242, 245, 255)" class="shop-trans-cell">
              <p class="factor-text">商品浏览量</p>
              <p class="factor-val">{{ shopTransTable.data[0]['ctm_item_view_pv'] }}</p>
              <trend
                [flag]="shopTransTable.data[0]['ctm_item_view_pv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['ctm_item_view_pv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['ctm_item_view_pv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td class="shop-trans-cell" style="background-color: rgb(242, 245, 255)"></td>
            <td class="shop-trans-cell" style="background-color: rgb(242, 245, 255)"></td>
            <td nzAlign="center" class="shop-trans-cell" style="background-color: rgb(139, 165, 231)">
              <p class="shop-trans-cell-name">访客</p>
            </td>
            <td nzAlign="left" [rowSpan]="4" class="shop-trans-lines-cell">
              <img src="assets/lines.png" alt="" />
              <span style="position: absolute; bottom: 20px; left: 55px">
                浏览-订单确认<br />转化率&nbsp;{{ shopTransTable.data[0]['ctm_order_view_rate'] * 100 | number: '0.1-2' }}%
              </span>
              <span style="position: absolute; bottom: 130px; left: 75px">
                下单转化率&nbsp;<br />{{ shopTransTable.data[0]['view_item_verified_rate'] * 100 | number: '0.1-2' }}%
              </span>
              <span style="position: absolute; bottom: 240px; left: 80px">
                加购-下单<br />转化率&nbsp;{{ shopTransTable.data[0]['order_cart_rate'] * 100 | number: '0.2-2' }}%
              </span>
              <span style="position: absolute; bottom: 340px; left: 90px">
                加购率&nbsp;{{ shopTransTable.data[0]['cart_rate'] * 100 | number: '0.2-2' }}%
              </span>
            </td>
          </tr>
          <tr style="background-color: rgb(242, 249, 255)">
            <td nzAlign="left">
              <p class="factor-text">加购人数</p>
              <p>{{ shopTransTable.data[0]['item_cart_uv'] }}</p>
              <trend [flag]="shopTransTable.data[0]['item_cart_uv_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['item_cart_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['item_cart_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">加购件数</p>
              <p>{{ shopTransTable.data[0]['cart_item_num'] }}</p>
              <trend [flag]="shopTransTable.data[0]['cart_item_num_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['cart_item_num_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['cart_item_num_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td></td>
            <td></td>
            <td style="background-color: rgb(144, 215, 246)" nzAlign="center">
              <p class="shop-trans-cell-name">加购</p>
            </td>
          </tr>
          <tr style="background-color: rgb(241, 248, 246)">
            <td nzAlign="left">
              <p class="factor-text">下单买家数</p>
              <p>{{ shopTransTable.data[0]['order_buyer_cnt'] }}</p>
              <trend [flag]="shopTransTable.data[0]['order_buyer_cnt_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['order_buyer_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['order_buyer_cnt_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">下单件数</p>
              <p>{{ shopTransTable.data[0]['order_item_num'] }}</p>
              <trend [flag]="shopTransTable.data[0]['cart_item_num_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['cart_item_num_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['cart_item_num_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">下单金额</p>
              <p>${{ shopTransTable.data[0]['item_order_usd'] | number: '0.2-2' }}</p>
              <trend [flag]="shopTransTable.data[0]['item_order_usd_compare'] > 0 ? 'up' : 'down'" style="display: block; margin-top: 2px">
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['item_order_usd_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['item_order_usd_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td></td>
            <td style="background-color: rgb(158, 226, 213)" nzAlign="center">
              <p class="shop-trans-cell-name">下单</p>
            </td>
          </tr>
          <tr style="background-color: rgb(247, 248, 241)">
            <td nzAlign="left">
              <p class="factor-text">订单确认人数</p>
              <p>{{ shopTransTable.data[0]['item_verified_uv'] }}</p>
              <trend
                [flag]="shopTransTable.data[0]['item_verified_uv_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['item_verified_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['item_verified_uv_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">订单确认件数</p>
              <p>{{ shopTransTable.data[0]['item_verified_cnt'] }}</p>
              <trend
                [flag]="shopTransTable.data[0]['item_verified_cnt_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['item_verified_cnt_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['item_verified_cnt_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">订单确认金额</p>
              <p>${{ shopTransTable.data[0]['item_verified_usd'] | number: '0.2-2' }}</p>
              <trend
                [flag]="shopTransTable.data[0]['item_verified_usd_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['item_verified_usd_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['item_verified_usd_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td nzAlign="left">
              <p class="factor-text">客单价</p>
              <p>${{ shopTransTable.data[0]['per_customer_value'] | number: '0.2-2' }}</p>
              <trend
                [flag]="shopTransTable.data[0]['per_customer_value_compare'] > 0 ? 'up' : 'down'"
                style="display: block; margin-top: 2px"
              >
                {{ compareText }}
                <span class="pl-sm" [style]="shopTransTable.data[0]['per_customer_value_compare'] > 0 ? 'color: red' : 'color:green'">
                  {{ shopTransTable.data[0]['per_customer_value_compare'] * 100 | number: '0.2-2' }}%
                </span>
              </trend>
            </td>
            <td style="background-color: rgb(175, 229, 179)" nzAlign="center">
              <p class="shop-trans-cell-name">订单确认</p>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </nz-card>
  <nz-card nzTitle="店铺流量来源构成">
    <nz-table #expandTable [nzData]="listOfMapData" [nzShowPagination]="false">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="5%"></th>
          <th nzAlign="center">流量来源</th>
          <th nzAlign="center" colspan="3">加购人数</th>
          <th nzAlign="center">下单转化率</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let data of expandTable.data">
          <ng-container *ngFor="let item of mapOfExpandedData[data['source_id']]">
            <tr *ngIf="(item['parent'] && item['parent']['expand']) || !item['parent']">
              <td
                [nzShowExpand]="!!item['children']"
                [(nzExpand)]="item['expand']"
                (nzExpandChange)="collapse(mapOfExpandedData[data['source_id']], item, $event)"
              >
              </td>
              <td nzAlign="left">
                <p>{{ item['source']['name'] }}</p>
              </td>
              <td nzAlign="center">
                <p>{{ item['ctm_item_click_uv'] }}</p>
                <trend
                  *ngIf="item['ctm_item_click_uv_compare']"
                  [flag]="item['ctm_item_click_uv_compare'] > 0 ? 'up' : 'down'"
                  style="display: block; margin-top: 2px"
                >
                  {{ compareText }}
                  <span class="pl-sm" [style]="item['ctm_item_click_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                    {{ item['ctm_item_click_uv_compare'] * 100 | number: '0.2-2' }}%
                  </span>
                </trend>
              </td>
              <td nzAlign="center">
                <p>{{ item['item_cart_uv'] }}</p>
                <trend
                  *ngIf="item['item_cart_uv_compare']"
                  [flag]="item['item_cart_uv_compare'] > 0 ? 'up' : 'down'"
                  style="display: block; margin-top: 2px"
                >
                  {{ compareText }}
                  <span class="pl-sm" [style]="item['item_cart_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                    {{ item['item_cart_uv_compare'] * 100 | number: '0.2-2' }}%
                  </span>
                </trend>
              </td>
              <td nzAlign="center">
                <p>{{ item['order_uv'] }}</p>
                <trend
                  *ngIf="item['order_uv_compare']"
                  [flag]="item['order_uv_compare'] > 0 ? 'up' : 'down'"
                  style="display: block; margin-top: 2px"
                >
                  {{ compareText }}
                  <span class="pl-sm" [style]="item['order_uv_compare'] > 0 ? 'color: red' : 'color:green'">
                    {{ item['order_uv_compare'] * 100 | number: '0.2-2' }}%
                  </span>
                </trend>
              </td>
              <td nzAlign="center">
                <p>{{ item['ctm_order_view_rate'] ? (item['ctm_order_view_rate'] * 100 | number: '0.2-2') : (0 | number: '0.2-2') }}%</p>
                <trend
                  *ngIf="item['ctm_order_view_rate_compare']"
                  [flag]="item['ctm_order_view_rate_compare'] > 0 ? 'up' : 'down'"
                  style="display: block; margin-top: 2px"
                >
                  {{ compareText }}
                  <span class="pl-sm" [style]="item['ctm_order_view_rate_compare'] > 0 ? 'color: red' : 'color:green'">
                    {{ item['ctm_order_view_rate_compare'] * 100 | number: '0.2-2' }}%
                  </span>
                </trend>
              </td>
              <td nzAlign="center"><a>查看趋势</a></td>
            </tr>
          </ng-container>
        </ng-container>
      </tbody>
    </nz-table>
  </nz-card>
  <nz-card nzTitle="商品流量排行">
    <nz-table #waresFlowRankTable [nzData]="waresFlowRank" [nzShowPagination]="false">
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="5%">排名</th>
          <th nzAlign="center" nzWidth="30%">商品信息</th>
          <th nzAlign="center">访客数</th>
          <th nzAlign="center">加购人数</th>
          <th nzAlign="center">下单人数</th>
          <th nzAlign="center">下单转化率</th>
          <th nzAlign="center">订单确认件数</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of waresFlowRankTable.data; let i = index">
          <td nzAlign="center">{{ i + 1 }}</td>
          <td nzAlign="left">
            <nz-comment>
              <nz-comment-content>
                <nz-image [nzWidth]="80" [nzHeight]="80" style="float: left; padding-right: 10px" nzSrc="{{ data['image'] }}"></nz-image>
                <p>{{ data['item_name'] }}</p>
                <p>商品ID: {{ data['item_id'] }}</p>
                <p>商品货号: {{ data['item_no'] }}</p>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td nzAlign="center">{{ data['ctm_item_click_uv'] }}</td>
          <td nzAlign="center">{{ data['item_cart_uv'] }}</td>
          <td nzAlign="center">{{ data['order_uv'] }}</td>
          <td nzAlign="center">{{ data['ctm_order_view_rate'] * 100 | number: '0.2-2' }}%</td>
          <td nzAlign="center">{{ data['item_verified_cnt'] }}</td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
</ng-container>
